フロントエンドモノレポ：LernaとNxによるワークスペース管理

絶えず進化するフロントエンド開発の状況において、大規模で複雑なプロジェクトの管理は大きな課題となり得ます。従来のマルチリポジトリ設定は、分離性を提供する一方で、コードの重複、依存関係管理の頭痛の種、ツールの一貫性の欠如につながる可能性があります。ここでモノレポアーキテクチャが輝きます。モノレポとは、複数のプロジェクト（多くは関連性がある）を含む単一のリポジトリであり、共にビルドされ、バージョン管理されます。このアプローチは多くの利点を提供しますが、モノレポを効果的に管理するには専門的なツールが必要です。この記事では、2つの人気のあるソリューション、LernaとNxを探ります。

モノレポとは？

モノレポとは、多くのプロジェクトのコードを保持するバージョン管理システムのリポジトリです。これらのプロジェクトは関連している場合もあれば、完全に独立している場合もあります。重要なのは、それらが同じリポジトリを共有していることです。Google、Facebook、Microsoft、Uberなどの企業は、巨大なコードベースを管理するためにモノレポを成功裏に採用しています。GoogleがAndroid、Chrome、Gmailを含むほぼすべてのコードを単一のリポジトリに保存していると考えてみてください。

モノレポの利点

• コードの共有と再利用：複雑なパッケージングや公開ワークフローなしに、プロジェクト間で簡単にコードを共有できます。同じリポジトリ内の複数のアプリケーションにシームレスに統合できるデザインシステムライブラリを想像してみてください。
• 依存関係管理の簡素化：依存関係を1か所で管理し、すべてのプロジェクトで一貫性を確保します。共有ライブラリの依存関係を更新すると、それに依存するすべてのプロジェクトが自動的に更新されます。
• アトミックな変更：複数のプロジェクトにまたがる変更を単一のコミットで行うことができ、一貫性を確保し、テストを簡素化します。例えば、フロントエンドとバックエンドの両方に影響を与えるリファクタリングをアトミックに行うことができます。
• コラボレーションの向上：チームは同じリポジトリ内の異なるプロジェクトで簡単に共同作業でき、知識共有と部門横断的な開発を促進します。開発者は異なるチームのコードを簡単に閲覧し、理解することができます。
• 一貫したツールと実践：すべてのプロジェクトで一貫したコーディング標準、リンティングルール、ビルドプロセスを強制します。これにより、コードの品質と保守性が向上します。
• リファクタリングの簡素化：すべての関連コードが同じリポジトリ内にあるため、大規模なリファクタリングプロジェクトが簡素化されます。自動リファクタリングツールをコードベース全体で使用できます。

モノレポの課題

• リポジトリのサイズ：モノレポは非常に大きくなる可能性があり、クローンやインデックス作成の操作が遅くなることがあります。`git sparse-checkout`や`partial clone`のようなツールがこの問題の緩和に役立ちます。
• ビルド時間：モノレポ全体をビルドするのは時間がかかることがあり、特に大規模なプロジェクトでは顕著です。LernaやNxのようなツールは、これに対処するために最適化されたビルドプロセスを提供します。
• アクセス制御：モノレポの特定の部分へのアクセスを制限することは複雑になる場合があります。アクセス制御メカニズムの慎重な計画と実装が必要です。
• ツールの複雑さ：モノレポのセットアップと管理には、専門的なツールと知識が必要です。学習曲線は最初は急かもしれません。

Lerna：モノレポでのJavaScriptプロジェクト管理

Lernaは、モノレポでJavaScriptプロジェクトを管理するための人気のツールです。Gitとnpmを使用したマルチパッケージリポジトリの管理に関するワークフローを最適化します。特に、依存関係管理にnpmやYarnを使用するプロジェクトに適しています。

Lernaの主な機能

• バージョン管理：Lernaは、最後のリリース以降に行われた変更に基づいて、パッケージのバージョンを自動的に設定し、公開することができます。Conventional Commitsを使用して次のバージョン番号を決定します。
• 依存関係管理：Lernaはパッケージ間の依存関係を処理し、モノレポ内のパッケージが互いに依存できるようにします。シンボリックリンクを使用してローカルの依存関係を作成します。
• タスク実行：Lernaは複数のパッケージにわたってコマンドを並行して実行でき、ビルドとテストのプロセスを高速化します。`package.json`で定義されたスクリプトの実行をサポートしています。
• 変更検出：Lernaは、最後のリリース以降に変更されたパッケージを検出し、対象を絞ったビルドとデプロイを可能にします。

Lernaの使用例

Lernaの使用法を簡単な例で示します。`package-a`と`package-b`という2つのパッケージを持つモノレポがあると仮定します。`package-b`は`package-a`に依存しています。

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Lernaの初期化：

lerna init

これにより`lerna.json`が作成され、ルートの`package.json`が更新されます。`lerna.json`ファイルはLernaの動作を設定します。

2. 依存関係のインストール：

npm install
# or
yarn install

これにより、各パッケージの`package.json`ファイルに基づいて、モノレポ内のすべてのパッケージの依存関係がインストールされます。

3. パッケージ全体でコマンドを実行：

lerna run test

これにより、`test`スクリプトが定義されているすべてのパッケージの`package.json`ファイルで定義された`test`スクリプトが実行されます。

4. パッケージの公開：

lerna publish

このコマンドはコミット履歴を分析し、変更されたパッケージを特定し、Conventional Commitsに基づいてバージョンを上げ、npm（または選択したレジストリ）に公開します。

Lernaの設定

`lerna.json`ファイルはLernaの設定の中心です。これにより、Lernaの動作をカスタマイズできます。例えば：

• `packages`：モノレポ内のパッケージの場所を指定します。多くの場合、`["packages/*"]`に設定されます。
• `version`：バージョニング戦略を指定します。`independent`（各パッケージが独自のバージョンを持つ）または固定バージョンにすることができます。
• `command`：`publish`や`run`など、特定のLernaコマンドのオプションを設定できます。

`lerna.json` の例：

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx：スマートで高速、拡張可能なビルドシステム

Nxは、モノレポ管理のための高度な機能を提供する強力なビルドシステムです。インクリメンタルビルド、計算キャッシング、タスクオーケストレーションに重点を置き、ビルド時間と開発者の生産性を大幅に向上させます。Lernaが主にパッケージの管理に焦点を当てているのに対し、Nxはコード生成、リンティング、テスト、デプロイメントを含む、モノレポのワークフロー全体を管理するためのより包括的なアプローチを提供します。

Nxの主な機能

• インクリメンタルビルド：Nxはプロジェクトの依存関係グラフを分析し、最後のビルド以降に変更されたプロジェクトのみを再ビルドします。これにより、ビルド時間が大幅に短縮されます。
• 計算キャッシング：Nxはビルドやテストなどのタスクの結果をキャッシュするため、入力が変更されていない場合は再利用できます。これにより、開発サイクルがさらに高速化されます。
• タスクオーケストレーション：Nxは強力なタスクオーケストレーションシステムを提供し、複雑なビルドパイプラインを定義して効率的に実行できます。
• コード生成：Nxは、ベストプラクティスと一貫した標準に従って、新しいプロジェクト、コンポーネント、モジュールを迅速に作成するのに役立つコード生成ツールを提供します。
• プラグインエコシステム：Nxには、React、Angular、Node.js、NestJSなど、さまざまな技術やフレームワークをサポートする豊富なプラグインエコシステムがあります。
• 依存関係グラフの可視化：Nxはモノレポの依存関係グラフを可視化でき、プロジェクト間の関係を理解し、潜在的な問題を特定するのに役立ちます。
• 影響範囲コマンド：Nxは、特定の変更によって影響を受けるプロジェクトに対してのみタスクを実行するコマンドを提供します。これにより、注意が必要な領域に集中できます。

Nxの使用例

Nxの使用法を簡単な例で示します。ReactアプリケーションとNode.jsライブラリを持つモノレポを作成します。

1. Nx CLIをグローバルにインストール：

npm install -g create-nx-workspace

2. 新しいNxワークスペースを作成：

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

これにより、Reactアプリケーションを持つ新しいNxワークスペースが作成されます。`--preset=react`オプションは、React固有の設定でワークスペースを初期化するようにNxに指示します。

3. ライブラリを生成：

nx generate @nrwl/node:library my-library

これにより、`my-library`という名前の新しいNode.jsライブラリが生成されます。Nxはライブラリとその依存関係を自動的に設定します。

4. アプリケーションをビルド：

nx build my-app

これにより、Reactアプリケーションがビルドされます。Nxは依存関係グラフを分析し、必要なファイルのみを再ビルドします。

5. テストを実行：

nx test my-app

これにより、Reactアプリケーションの単体テストが実行されます。Nxはテスト結果をキャッシュして、後続のテスト実行を高速化します。

6. 依存関係グラフを表示：

nx graph

これにより、モノレポの依存関係グラフを可視化するWebインターフェースが開きます。

Nxの設定

Nxは、ワークスペースのルートにある`nx.json`ファイルを通じて設定されます。このファイルは、ワークスペース内のプロジェクト、それらの依存関係、およびそれらに対して実行できるタスクを定義します。

`nx.json`の主要な設定オプションには以下が含まれます：

• `projects`：ワークスペース内のプロジェクトとその設定（ルートディレクトリやビルドターゲットなど）を定義します。
• `tasksRunnerOptions`：タスクの実行と結果のキャッシングを担当するタスクランナーを設定します。
• `affected`：変更によってどのプロジェクトが影響を受けるかをNxがどのように判断するかを設定します。

`nx.json` の例：

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    },
  }
}

Lerna vs. Nx：どちらを選ぶべきか？

LernaとNxはどちらもフロントエンドモノレポを管理するための優れたツールですが、若干異なるニーズに対応しています。プロジェクトに適したツールを選択するのに役立つ比較を以下に示します：

機能	Lerna	Nx
焦点	パッケージ管理	ビルドシステムとタスクオーケストレーション
インクリメンタルビルド	限定的（外部ツールが必要）	組み込みで高度に最適化
計算キャッシング	なし	あり
コード生成	なし	あり
プラグインエコシステム	限定的	広範
学習曲線	低い	高い
複雑さ	よりシンプル	より複雑
ユースケース	主にnpmパッケージの管理と公開に焦点を当てたプロジェクト。	最適化されたビルド時間、コード生成、包括的なビルドシステムを必要とする大規模で複雑なプロジェクト。

次の場合にLernaを選択します：

• 主にnpmパッケージの管理と公開が必要な場合。
• プロジェクトが比較的小規模から中規模である場合。
• 学習曲線が低い、よりシンプルなツールを好む場合。
• すでにnpmやYarnに慣れている場合。

次の場合にNxを選択します：

• 最適化されたビルド時間とインクリメンタルビルドが必要な場合。
• コード生成機能が必要な場合。
• タスクオーケストレーションを備えた包括的なビルドシステムが必要な場合。
• プロジェクトが大規模で複雑な場合。
• より強力なツールを学ぶために時間を投資する意欲がある場合。

LernaとNxは併用できますか？

はい、LernaとNxは併用できます。この組み合わせにより、Lernaのパッケージ管理機能を活用しつつ、Nxの最適化されたビルドシステムとタスクオーケストレーションの恩恵を受けることができます。NxをLernaのタスクランナーとして設定することで、Lernaで管理されるパッケージに対してインクリメンタルビルドと計算キャッシングを提供できます。

フロントエンドモノレポ管理のベストプラクティス

LernaまたはNxのどちらを選択するかにかかわらず、フロントエンドモノレポを成功裏に管理するためには、ベストプラクティスに従うことが重要です：

• 明確なプロジェクト構造を確立する：プロジェクトを論理的かつ一貫して整理します。パッケージやライブラリには明確な命名規則を使用します。
• 一貫したコーディング基準を強制する：リンターやフォーマッターを使用して、すべてのプロジェクトで一貫したコードスタイルを確保します。ESLintやPrettierのようなツールをワークフローに統合できます。
• ビルドとテストプロセスを自動化する：CI/CDパイプラインを使用して、ビルド、テスト、デプロイのプロセスを自動化します。Jenkins、CircleCI、GitHub Actionsなどのツールが使用できます。
• コードレビューを実装する：コードの品質と保守性を確保するために、徹底的なコードレビューを実施します。プルリクエストやコードレビューツールを使用します。
• ビルド時間とパフォーマンスを監視する：ビルド時間とパフォーマンスメトリクスを追跡して、ボトルネックや改善の余地がある領域を特定します。Nxはビルドパフォーマンスを分析するためのツールを提供します。
• モノレポの構造とプロセスを文書化する：モノレポの構造、使用されているツールと技術、開発ワークフローを説明する明確なドキュメントを作成します。
• Conventional Commitsを採用する：Conventional Commitsを使用して、バージョニングとリリースプロセスを自動化します。Lernaは最初からConventional Commitsをサポートしています。

結論

フロントエンドモノレポは、コード共有、依存関係管理の簡素化、コラボレーションの向上など、大規模で複雑なプロジェクトを管理する上で大きな利点を提供します。LernaとNxは、フロントエンドモノレポを効果的に管理するのに役立つ強力なツールです。Lernaはnpmパッケージの管理に適した選択肢であり、一方Nxはインクリメンタルビルドやコード生成などの高度な機能を備えた、より包括的なビルドシステムを提供します。プロジェクトのニーズを慎重に検討し、ベストプラクティスに従うことで、フロントエンドモノレポを成功裏に採用し、その利点を享受することができます。

LernaとNxのどちらかを選択する際には、チームの経験、プロジェクトの複雑さ、パフォーマンス要件などの要素を考慮することを忘れないでください。両方のツールを試してみて、特定のニーズに最も合ったものを見つけてください。

モノレポの旅がうまくいくことを願っています！